<script lang="ts" setup>
let pageAxios: any = inject('$axios');
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();

const orderingList = ref([
  {
    key: '订单类型',
    value: '无',
  },
  {
    key: '订单状态',
    value: '无',
  },
  {
    key: '用户评价',
    value: '无',
  },
  {
    key: '信息类型',
    value: '无',
  },
  {
    key: '是否付费',
    value: '无',
  },
  {
    key: '付费金额',
    value: '无',
  },
]);
// 记录
const manualList = ref([]);

/**
 * 查看备注
 */
const dialogRemarkOpitons = reactive({
  dialogShow: false,
  title: '查看备注',
  width: '45%',
  footButtonList: {
    cancel: {
      type: 'cancel',
      buttonType: 'default',
      btnText: '关 闭',
      btnLoading: false,
      btnLoadingText: '',
    },
  },
});
const handelRemark = () => {
  dialogRemarkOpitons.dialogShow = true;
};
const handelDialogRemarkButton = () => {
  dialogRemarkOpitons.dialogShow = false;
};

/**
 * 查看回访记录
 */
const dialogRecordOpitons = reactive({
  dialogShow: false,
  title: '查看回访记录',
  width: '45%',
  footButtonList: {
    cancel: {
      type: 'cancel',
      buttonType: 'default',
      btnText: '关 闭',
      btnLoading: false,
      btnLoadingText: '',
    },
  },
});
const formRecordOptions = reactive({
  labelWidth: '55px',
  labelPosition: 'left',
});
const formRecord: any = ref({
  visit_score: '',
  visit_appraise: '',
});
const handelRecord = () => {
  dialogRecordOpitons.dialogShow = true;
  formRecord.value = {
    visit_score: jumpParams.value.visit_score,
    visit_appraise: jumpParams.value.visit_appraise,
  };
};
const handelDialogRecordButton = () => {
  dialogRecordOpitons.dialogShow = false;
};

// 流转记录
const getTaskLogsMet = async () => {
  let res = await pageAxios.getTaskLogs({
    id: jumpParams.value.id,
  });
  manualList.value = res.data.data;
};

/**
 * 复制联系
 */
const handelCopy = async () => {
  if (!jumpParams.value.nickname)
    return ElMessage.warning('暂无信息可复制！');
  let str = `微信昵称：${jumpParams.value.nickname}`
  if (jumpParams.value.number) {
    str += `   微信号：${jumpParams.value.number}`
  }
  await toClipboard(str);
  ElMessage.success('复制成功！')
};

// 处理地区数据
const dealCityDate = (city) => {
  return city.join('.');
};

/**
 * init 初始化方法入口
 */
const inputList = ref();
const loading = ref(false);
const jumpParams = ref();
const init = async () => {
  jumpParams.value = history.state.obj;
  // 订单类型
  orderingList.value[0].value = jumpParams.value.style == 1 ? '普通' : 'VIP';
  // 状态
  let obj = {
    0: {
      title: '支付中',
      type: 'primary',
    },
    1: {
      title: '待移交',
      type: 'primary',
    },
    2: {
      title: '已取消',
      type: 'danger',
    },
    3: {
      title: '已删除',
      type: 'danger',
    },
    4: {
      title: '已驳回',
      type: 'danger',
    },
    5: {
      title: '已通过',
      type: 'success',
    },
    6: {
      title: '已移交',
      type: 'success',
    },
    7: {
      title: 'vip待创建',
      type: 'warning',
    },
    8: {
      title: '超时',
      type: 'warning',
    },
  };
  orderingList.value[1].value = obj[jumpParams.value.status].title;
  orderingList.value[2].value = jumpParams.value.visit_appraise;
  orderingList.value[3].value = jumpParams.value.cat_1_msg;
  orderingList.value[4].value = jumpParams.value.is_pay == 1 ? '是' : '否';
  orderingList.value[5].value = jumpParams.value.pay_sum
    ? (Number(jumpParams.value.pay_num) / 100).toFixed(2) + '元'
    : '0元';

  // 日志
  getTaskLogsMet();

  // 获取表单数据
  loading.value = true;
  let res = await pageAxios.getAdminRecordDetail({
    filling_id: jumpParams.value.rpc_id,
  });
  loading.value = false;
  inputList.value = res.data.data.record;
};
init();
</script>
<template>
  <div class="backVisitDetail">
    <!-- 详情顶部 -->
    <div class="informationo">
      <div class="infornumber">
        <div class="weave">信息编号：{{ jumpParams?.no }}</div>
        <div class="inforbtn">
          <el-button type="primary" @click="handelRemark" :disabled="!jumpParams?.content_vip">
            查看备注
          </el-button>
          <el-button type="primary" @click="handelCopy">复制联系</el-button>
          <el-button type="primary" @click="handelRecord">
            查看回访记录
          </el-button>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="ordering">
        <div class="ordernumber" v-for="(item, index) in orderingList" :key="index">
          <span>{{ item.key }}:</span>
          <span>{{ item.value }}</span>
        </div>
      </div>
    </div>
    <div class="operate" v-loading="loading" element-loading-text="数据加载中...">
      <!-- 全部信息 -->
      <template v-if="inputList?.length">
        <div class="viewing">
          <div class="informationcont">
            <div class="informationcont_list" v-for="(item, index) in inputList" :key="index">
              <!-- 输入框 -->
              <template v-if="item.bank_info.type == 1">
                <span class="fontwen">{{ item.bank_info.name }}:</span>
                <el-input v-model="item.content" type="text" disabled />
              </template>
              <!-- 单选框 -->
              <template v-if="item.bank_info.type == 2">
                <span class="fontwen">{{ item.bank_info.name }}:</span>
                <el-radio-group v-model="item.content" class="ml-4" disabled>
                  <el-radio :label="itemRadio.option_text" size="large"
                    v-for="(itemRadio, indexRadio) in item.option_info" :key="indexRadio">
                    {{ itemRadio.option_text }}
                  </el-radio>
                </el-radio-group>
              </template>
              <!-- 多选框 -->
              <template v-if="item.bank_info.type == 3">
                <span class="fontwen">{{ item.bank_info.name }}:</span>
                <el-checkbox-group v-model="item.option_id" disabled>
                  <el-checkbox :label="String(itemCheckbox.id)"
                    v-for="(itemCheckbox, indexCheckbox) in item.option_info" :key="indexCheckbox">
                    {{ String(itemCheckbox.option_text) }}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
              <!-- 日期 -->
              <template v-if="item.bank_info.type == 4">
                <span class="fontwen">{{ item.bank_info.name }}:</span>
                <template v-if="item.bank_info.check_date == 1">
                  <el-date-picker v-model="item.content" type="datetime" disabled placeholder="请选择"
                    value-format="YYYY-MM-DD HH:mm:ss" />
                </template>
                <template v-else-if="item.bank_info.check_date == 2">
                  <el-date-picker v-model="item.content" type="date" disabled placeholder="请选择"
                    value-format="YYYY-MM-DD" />
                </template>
                <template v-else-if="item.bank_info.check_date == 3">
                  <el-date-picker v-model="item.content" type="month" disabled placeholder="请选择"
                    value-format="YYYY-MM" />
                </template>
                <template v-else-if="item.bank_info.check_date == 4">
                  <el-date-picker popper-class="picker-dateNoneYear" v-model="item.content" placeholder="请选择"
                    type="date" disabled format="MM-DD" value-format="MM-DD" />
                </template>
              </template>
              <!-- 时间、时长 -->
              <template v-if="item.bank_info.type == 5 || item.bank_info.type == 6">
                <span class="fontwen">{{ item.bank_info.name }}:</span>
                <template v-if="item.bank_info.check_date == 5">
                  <el-time-picker disabled v-model="item.content" placeholder="请选择" value-format="HH:mm:ss" />
                </template>
                <template v-if="item.bank_info.check_date == 6">
                  <el-time-picker disabled v-model="item.content" placeholder="请选择" value-format="HH:mm"
                    format="HH:mm" />
                </template>
                <template v-if="item.bank_info.check_date == 7">
                  <el-time-picker disabled v-model="item.content" value-format="mm:ss" format="mm:ss" :picker-options="{
          selectableRange: '00:00:00 - 00:59:59',
        }" popper-class="noneMinute" placeholder="请选择" />
                </template>
              </template>
              <!-- 图片 -->
              <template v-if="item.bank_info.type == 7">
                <span class="fontwen">{{ item.bank_info.name }}:</span>
                <el-image disabled style="width: 100px; height: 100px" :src="item.file[0]" fit="cover" />
              </template>
              <!-- 文件 -->
              <template v-if="item.bank_info.type == 8">
                <span class="fontwen">{{ item.bank_info.name }}:</span>
                <el-upload style="
                    width: 80% !important;
                    line-height: 20px;
                    margin-top: -20px;
                  " disabled :file-list="[{ name: item.content }]" class="upload-demo"></el-upload>
              </template>
              <!-- 地区 -->
              <template v-if="item.bank_info.type == 99999996">
                <div style="display: flex; justify-content: start; width: 100%">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <div class="showCity" v-for="(aItem, bIndex) in item.content" :key="bIndex">
                    <p>{{ dealCityDate(aItem) }}</p>
                  </div>
                </div>
              </template>
              <!-- 标签 -->
              <template v-if="item.bank_info.type == 99999995">
                <div style="display: flex; justify-content: start; width: 100%">
                  <span class="fontwen">{{ item.bank_info.name }}:</span>
                  <div style="width: 89%">
                    <div class="showLabe">
                      <p v-for="(aItem, bIndex) in item.content" :key="bIndex">
                        {{ aItem }}
                      </p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="viewing" style="text-align: center; line-height: 300px">
          暂无展示数据
        </div>
      </template>

      <!-- 操作记录 -->
      <template v-if="manualList.length">
        <div class="manual">
          <div class="pspan">操作记录</div>
          <div class="transfer">
            <div class="handover" v-for="(itempro, indexpro) in manualList" :key="indexpro">
              <span>{{ itempro.created_at }}</span>
              <div class="notes">
                <p>
                  进行
                  <span>“{{ itempro.msg }}“</span>
                  操作
                </p>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div style="text-align: center; line-height: 245px" class="manual">
          暂无操作记录
        </div>
      </template>
    </div>
    <!-- 查看备注 -->
    <Dialog :dialog-object="dialogRemarkOpitons" @handelDialogButton="handelDialogRemarkButton">
      <template v-slot:dialogContaint>
        <div v-html="jumpParams?.content_vip" v-if="jumpParams?.content_vip"></div>
        <div v-else style="text-align: center; line-height: 100px">
          暂无数据
        </div>
      </template>
    </Dialog>

    <!-- 查看回访记录 弹窗 -->
    <Dialog :dialog-object="dialogRecordOpitons" @handelDialogButton="handelDialogRecordButton">
      <template v-slot:dialogContaint>
        <Form :form-object="formRecordOptions" :form="formRecord">
          <template v-slot:formContaint>
            <el-form-item label="评价:">
              <el-rate v-model="formRecord.visit_score" disabled disabledVoidColor="#cdd0d6" />
            </el-form-item>
            <el-form-item label="内容:">
              <el-input v-model="formRecord.visit_appraise" :rows="10" type="textarea" disabled />
            </el-form-item>
          </template>
        </Form>
      </template>
    </Dialog>
  </div>
</template>
<style scoped lang="scss">
.backVisitDetail {
  width: 100%;
  height: 101%;

  .informationo {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #3c3c3c;
    padding: 30px 20px 15px 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    color: #3c3c3c;

    .infornumber {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #3c3c3c;

      .weave {
        font-size: 25px;
        font-weight: bold;
        color: #3c3c3c;
      }
    }

    .ordering {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #3c3c3c;

      .ordernumber {
        margin-right: 30px;
        color: #3c3c3c;

        >span:nth-child(2) {
          margin-left: 10px;
          color: #3c3c3c;
        }
      }
    }
  }

  .operate {
    display: flex;
    height: calc(100% - 120px);

    .viewing {
      width: calc(100% - 420px);
      padding: 30px 0 30px 56px;
      height: 100%;

      .informationcont {
        height: 100%;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 0px !important;
        }

        .informationcont_list {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 20px;

          span {
            display: inline-block;
            width: 100px;
          }

          ::v-deep .el-input {
            width: 65% !important;
            height: 40px;
          }

          .showCity {
            display: flex;
            flex-wrap: wrap;

            p {
              padding: 8px;
              border: 1px solid #3c3c3c;
              margin: 0 8px 8px 0;
              border-radius: 20px;
              font-size: 13px;
              color: #3c3c3c;
            }
          }

          .showLabe {
            display: flex;
            flex-wrap: wrap;

            p {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 8px;
              margin: 0 8px 8px 0;
              border-radius: 20px;
              min-width: 95px;
              text-align: center;
              font-size: 13px;
              color: #3c3c3c;
              border: 1px solid #3c3c3c;

              i {
                font-size: 16px;
                margin-left: 5px;
                cursor: pointer;
              }
            }
          }
        }
      }

      .fontwen {
        color: #262626;
        font-weight: 600;
      }

      .messarea,
      .labelBox {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 15px;

        .areadata,
        .labelBoxList {
          height: 30px;
          border: 1px solid #939393;
          margin: 20px 0 0 15px;
          border-radius: 15px;
          font-size: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 15px;
        }
      }
    }

    .manual {
      width: 420px;
      background-color: #efefef;
      border-left: 1px solid #666666;
      padding: 30px 46px;

      .pspan {
        font-size: 24px !important;
        font-weight: bold;
      }

      .transfer {
        height: 90%;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 0px !important;
        }

        .handover {
          width: 100%;
          display: flex;
          align-items: flex-start;
          margin-top: 20px;
          color: #262626;

          >span {
            white-space: nowrap;
            margin-right: 15px;
            font-size: 15px;
          }

          .notes {
            font-size: 13px;
            font-weight: 700;

            >p:nth-child(1) {
              font-size: 14px;
              margin-bottom: 10px;

              >span {
                color: #166ae0;
              }
            }
          }
        }
      }
    }
  }

  /*选择日期，年份的隐藏 */
  ::v-deep .picker-dateNoneYear {
    .el-date-picker__header {
      span:nth-child(3) {
        /*第三个标签是span的标签，把它隐藏*/
        display: none;
      }

      button:nth-child(1) {
        display: none;
      }

      button:nth-child(5) {
        display: none;
      }
    }
  }

  //这个应该是隐藏小时的代码
  ::v-deep .noneMinute {
    .el-scrollbar:nth-of-type(1) {
      display: none;
    }

    //调整样式
    .el-time-spinner {
      width: 150%;
      white-space: nowrap;
    }
  }

}
</style>
